<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
    <div class="w-full max-w-md">
      <!-- Logo and Title -->
      <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-600 rounded-full mb-4">
          <span class="text-white text-2xl font-bold">擎</span>
        </div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">擎动智造</h1>
        <p class="text-gray-600">自动化执行平台</p>
      </div>

      <!-- Login Card -->
      <a-card class="shadow-xl rounded-lg">
        <h2 class="text-xl font-semibold text-gray-800 mb-6">登录</h2>
        
        <a-form
          :model="formState"
          :rules="rules"
          @finish="handleLogin"
          layout="vertical"
        >
          <a-form-item label="用户名" name="username">
            <a-input
              v-model:value="formState.username"
              size="large"
              placeholder="请输入用户名"
            >
              <template #prefix>
                <UserOutlined class="text-gray-400" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="密码" name="password">
            <a-input-password
              v-model:value="formState.password"
              size="large"
              placeholder="请输入密码"
            >
              <template #prefix>
                <LockOutlined class="text-gray-400" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
          </a-form-item>

          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              size="large"
              block
              :loading="loading"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>

        <div class="text-center text-sm text-gray-500 mt-4">
          <p>默认账号: admin / admin123</p>
        </div>
      </a-card>

      <!-- Footer -->
      <div class="text-center mt-8 text-gray-500 text-sm">
        <p>© 2025 擎动智造 InnoDrive. All rights reserved.</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const formState = reactive({
  username: '',
  password: '',
  remember: false
})

const loading = ref(false)

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名至少3个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  loading.value = true
  
  try {
    // 调用登录API
    await userStore.login({
      username: formState.username,
      password: formState.password
    })
    
    message.success('登录成功!')
    router.push('/workstations')
  } catch (error) {
    message.error(error.message || '登录失败,请重试!')
    console.error('Login error:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
:deep(.ant-card) {
  border: none;
}
</style>

